.component-interactive-button {
  &-main {
  }
  :global {
    .ant-btn {
      width: 100%;
      height: 100%;
    }
    // primary
    .ant-btn-primary,
    .ant-btn-primary:hover,
    .ant-btn-primary:focus,
    .ant-btn-primary:active {
      color: var(--component-interactive-button-text-color);
      border-color: var(--component-interactive-button-bg-color);
      background: var(--component-interactive-button-bg-color);
    }
    // default
    .ant-btn.ant-btn-default {
      border-color: var(--component-interactive-button-bg-color);
      background: transparent;
    }
    .ant-btn.ant-btn-default:hover,
    .ant-btn.ant-btn-default:focus,
    .ant-btn.ant-btn-default:active {
      background: transparent;
      color: var(--component-interactive-button-bg-color);
      border-color: var(--component-interactive-button-bg-color);
    }
  }
}
